<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem test</title>
    <!--
        rem是相对于html根元素的字体大小;
        html的font-size=16px;
        1rem=16px;
    -->
    <style type="text/css">
        html {
            font-size: 32px;
        }

        h1 {
            font-size: 0.9rem;
        }
        h2 {
            font-size: 0.7rem;
        }
        h3 {
            font-size: 0.5rem;
        }
        h4 {
            font-size: 2rem;
        }
        h5 {
            font-size: 4rem;
        }

        div {
            height: 1rem;
            background-color: aquamarine;
        }
        div.div-1rem {
            width: 1rem;
        }

        div.div-2rem {
            width: 2rem;
        }

        div.div-3rem {
            width: 3rem;
        }
    </style>
</head>
<body>

    <h1>Hello world.</h1>
    <h2>Hello world.</h2>
    <h3>Hello world.</h3>
    <h4>Hello world.</h4>
    <h5>Hello world.</h5>

    <div class="div-1rem"></div>
    <div class="div-2rem"></div>
    <div class="div-3rem"></div>

</body>
</html>